<template>
  <div class="my-outbox" ref="wrap">
    <div class="my-inbox" ref="content">
      <div class="my-list">
        {{ text }}
      </div>
    </div>
    <i class="el-icon-close close" @click="closeBox"></i>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      Type: String,
      default: "",
    },
  },
  data() {
    return {
      wrapWidth: 0,
      contentWidth: 0,
    };
  },
  activated() {
    this.start();
  },
  mounted() {
    this.start();
  },
  methods: {
    start() {
      const { wrap, content } = this.$refs;
      this.wrapWidth = wrap.getBoundingClientRect().width;
      this.contentWidth = content.getBoundingClientRect().width;
      this.animateFn();
    },
    animateFn() {
      const { content } = this.$refs;
      let distance = this.wrapWidth / 2;
      content.style.transform = "translateX(" + distance + "px)"; //初始值
      let that = this;
      setInterval(function () {
        distance = distance - 1;
        if (-distance >= that.contentWidth) {
          distance = that.wrapWidth;
        }
        content.style.transform = "translateX(" + distance + "px)";
      }, 20); //控制速度
    },
    closeBox() {
      this.$emit("close");
    },
  },
  // 更新的时候运动
  updated: function () {
    this.animateFn();
  },
};
</script>

<style lang="scss" scoped>
.my-outbox {
  color: #d7bc8d;
  overflow: hidden;
  height: 35px;
  background: #ffffff;
  position: relative;
  cursor: pointer;
  .my-inbox {
    white-space: nowrap;
    position: absolute;
    font-size: 0;
    .my-list {
      margin-right: 25px;
      display: inline-block;
      font-size: 12px;
      height: 35px;
      color: #000;
      line-height: 35px;
    }
  }
  .close {
    height: 100%;
    width: 42px;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #999;
    cursor: pointer;
    font-size: 16px;
  }
}
</style>